<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网站</title>
		<script src="jquery-3.6.0.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="bootstrap/css/index.css"/>
	</head>
	
	<style>
		/* 通用阴影效果 */
		.shadow{
			box-shadow: 10px 10px 10px 5px #888888;
		}
	</style>
	<body>
		<!-- 顶部导航栏 -->
		<ul class="nav nav-tabs" id="dh">
			<li><a href="#">Home</a></li>
			<li class="active"><a href="#">SVN</a></li>
			<li><a href="#">iOS</a></li>
			<li><a href="#">VB.Net</a></li>
			<li><a href="#">Java</a></li>
			<li><a href="#">PHP</a></li>
			<li><a href="#">genduo</a></li>
		</ul>
		<!-- 折叠按钮 -->
		<div class="navigation">
			
			<span class="glyphicon glyphicon-th-list" id="dh1">
				<div><a href="">javascript</a></div>
				<div><a href="">jquery</a></div>
				<div><a href="">bootstrap</a></div>
				<div><a href="">Vue.js</a></div>
			</span>
		</div>
		<div id="myCarousel" class="carousel slide" >
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="bootstrap/../12.jpeg" alt="First slide">
					<div class="carousel-caption"><h1>标题1</h1></div>
				</div>
				<div class="item">
					<img src="bootstrap/../12.jpeg" alt="Second slide">
					<div class="carousel-caption"><h1>标题2</h1></div>
				</div>
				<div class="item">
					<img src="bootstrap/../12.jpeg" alt="Third slide">
					<div class="carousel-caption"><h1>标题3</h1></div>
				</div>
			</div>
			<!-- 轮播（Carousel）导航 -->
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>	
			</div>
			
			<!-- 左侧导航 -->
				<div class="container" data-spy="scroll" data-target="#myScrollspy" data-offset="20" id="dh2">
					<nav class="col-sm-3" id="myScrollspy">
						<div class="container-fluid"> 
						<div class="container-fluid"> 
						<ul class="nav nav-pills nav-stacked shadow">
							<li class="active"><a href="#section1">relevant information 1</a></li>
							<li><a href="#section2">relevant information 2</a></li>
							<li><a href="#section3">relevant information 3</a></li>
							<li class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href="#">relevant information 4 <span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li><a href="#section41">relevant information 4-1</a></li>
									<li><a href="#section42">relevant information 4-2</a></li>                     
								</ul>
							</li>
						</ul>
						</div>	
						</div>		
					</nav>
					<div class="col-sm-9">
						<div id="section1" class="shadow">    
							<h1>relevant information 1</h1>
							<p>Try to scroll this section and look at the navigation list while scrolling!</p>
						</div>
						<div id="section2" class="shadow"> 
							<h1>relevant information 2</h1>
							<p>Try to scroll this section and look at the navigation list while scrolling!</p>
						</div>        
						<div id="section3" class="shadow">         
							<h1>relevant information 3</h1>
							<p>Try to scroll this section and look at the navigation list while scrolling!</p>
						</div>
						<div id="section41" class="shadow">         
							<h1>relevant information 4-1</h1>
							<p>Try to scroll this section and look at the navigation list while scrolling!</p>
						</div>      
						<div id="section42" class="shadow">         
							<h1>relevant information 4-2</h1>
							<p>Try to scroll this section and look at the navigation list while scrolling!</p>
						</div>
					</div>
			</div>
			<div  id="go-top">
				<a href="#dh"><button type="button" class="button"></button></a>
			</div>
			<div id="phone">
				<span>联系我们 :<a href="#">13546845395</a></span>
				<a href="#"><span class="glyphicon glyphicon-earphone"></span></a>
			</div>
			<div id="img"></div>
	</body>
	<script>
		//顶部导航点击改变样式
		$(".nav li").click(function() {
			$(".nav li").attr('class', ''),
				$(this).attr('class', 'active')
		});
		
		//阴影效果添加
		
		//展开按钮
		$("#dh1").find("div").hide();
		$("#dh1").click(function() {
			let sj = $(this).attr("class");
			switch ('glyphicon glyphicon-th-list' == sj) {
				case true:
					$(".carousel-control").css('top','10.7rem');
					$(".navigation>span").css('height','13rem');
					$(this).find("div").show();
					$(this).attr("class", "glyphicon glyphicon-remove");
					$("#img").height('175rem');
					$("#phone").height('15.8rem');
					break;
				case false:
					$(".carousel-control").css('top','0');
					$(".navigation>span").css('height','0');
					$(this).find("div").hide();
					$(this).attr("class", "glyphicon glyphicon-th-list");
					$("#img").height('163rem');
					$("#phone").height('5.8rem');
					break;
			}
		});
		$(".button").hide();
		/* 左侧导航栏以及快速到底顶部按钮一定高度再绝对定位 */
		window.onscroll=function(){
			    var topScroll =$(window).scrollTop();//滚动的距离,距离顶部的距离
				var myScrollspy  = $("#myScrollspy").offset().top;
				if(topScroll >= myScrollspy){  
					$("ul.nav-pills").css('position','fixed');
					$("ul.nav-pills").css('top','1.25rem');
					$("ul.nav-pills").css('left','5rem');
					$("ul.nav-pills").css('zIndex','9999');
				} else {
					$("ul.nav-pills").css('position','static');
					$("ul.nav-pills").css('margin-top','1.25rem');
				}
				$(".button").toggle(topScroll > 200)
				
			}
	</script>
</html>
